<template>
  <div>
    <div class="mv-play">
      <header class="return-box">
        <i class="iconfont icon-return" @click="close"></i>
      </header>
      <main class="video-box">
        <video :src="videoInfo.url" controls autoplay loop ref="video"></video>
      </main>
      <footer class="toolbar">
        <div class="like-box">
          <i class="iconfont icon-blockLike"></i>
          <p>{{toolbars.likedCount}}</p>
        </div>
        <div class="comment-box">
          <i class="iconfont icon-blockComment"></i>
          <p>{{toolbars.commentCount}}</p>
        </div>
        <div class="forward-box">
          <i class="iconfont icon-forward"></i>
          <p>{{toolbars.shareCount}}</p>
        </div>
      </footer>
    </div>
  </div>
</template>

<script>
export default {
  props: ["pid"],
  data() {
    return {
      videoInfo: {},
      toolbars:{},
    };
  },
  created() {
    this.getMvinfo();
    this.getMvComment();
  },
  methods: {
    async getMvinfo() {
      let re = await this.axios.get(`/mv/url?id=${this.pid}`);
      this.videoInfo = re;
    },
    async getMvComment() {
      let re = await this.axios.get(`/mv/detail/info?mvid=${this.pid}`);
      this.toolbars = re;
    },
    close(){
      this.$router.go(-1);
    }
  },
};
</script>

<style lang="less" scoped>
.mv-play {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 99;
  background: #000;
  color: #fff;
  .return-box {
    padding: 12px 0 0 12px;
    i {
      font-size: 30px;
      font-weight: bold;
    }
  }
  .video-box {
    width: 100%;
    height: 220px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    video {
      width: 100%;
      height: 100%;
    }
  }
  .toolbar {
    display: flex;
    position: absolute;
    bottom: 14%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    div {
      flex-grow: 1;
      i {
        font-size: 34px;
        display: block;
      }
      i,p{
        text-align: center;
      }
      p{
        padding-top: 8px;
        font-size: 14px;
        font-weight: bold;
      }
    }
  }
}
</style>